<template>
    <div id="basic-layout">
        <TopBar></TopBar>
        <div class="content">
            <router-view></router-view>
        </div>
        <div class="footer">
            <a href="https://gitee.com/Saccharin_Carlotta/mkschat" target="_blank" rel="noopener noreferrer">About
                mkschat</a>
        </div>

    </div>
</template>

<script setup>
    import TopBar from '@/components/TopBar.vue'
    import { useLoginUserStore } from '@/store/useLoginUserStore'
    import { onMounted, onUnmounted } from 'vue'
    // import wsService from '@/api/websocket'
    const loginUserStore = useLoginUserStore()
    loginUserStore.fetchLoginUser()

    let wsService = null
    onMounted(() => {
        setTimeout(async () => {
            wsService = await import('@/api/websocket')
            wsService.default.connect()
        }, 1000)


    })
    onUnmounted(() => {
        if (wsService) {
            wsService.close()
        }

    })
</script>

<style lang="less" scoped>
    * {
        box-sizing: border-box;
    }

    #basic-layout {
        // .background-pic {
        //     position: fixed;
        //     top: 0;
        //     left: 0;
        //     width: 100%;
        //     z-index: -1;
        // }

        background-image: url("../assets/images/background2.jpg");
        /* 让背景图全屏显示 */
        background-size: cover;
        /* 背景图固定，不随滚动条滚动 */
        background-attachment: fixed;
        /* 背景图居中显示 */
        background-position: center;
        /* 背景图不重复 */
        background-repeat: no-repeat;


        .header {
            height: 52px;
            width: 100%;
        }

        .content {
            // margin-top: 70px;
            // margin-bottom: 20px;
            // position: fixed;
            height: 100vh;
            overflow-y: auto;
            left: 0;
            background: rgba(0, 0, 0, 0);
            padding-top: 52px;
            padding-bottom: 30px;
        }

        .footer {
            background-color: #45444450;
            text-align: center;
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 16px;

            a {
                color: white;
                text-decoration: none;
            }

            a:hover {
                color: rgb(235, 15, 15);
                text-decoration: underline;
            }

        }

    }
</style>